<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
        margin:0;
        padding:0;
       }
       body{
        height:3000px;
       }
       #box{
        height:300px;
        width:200px;
        background: #ccc;
        margin:1000px 50px;
       }
       img{
        height:300px;
        width:200px;
       }
       /* 隐藏src无值的裂图 */
       img[src=""]{
         display: none;
       }
    </style>
</head>
<body>
    <!-- 1.占位盒子，给图片占位 -->
    <div id="box">
        <img src="" data-src="./瀑布流/images/1.jpg"  alt="">
    </div>

    <script>
       //滚动滚动条，盒子在视口中完全出现，加载图片
       let img=document.querySelector("img");
       let html=document.documentElement||document.body;

       function showimg(){
          console.log("111");
          let dataSrc=img.getAttribute("data-src");
          // let newimg=document.createElement("img");
          let newimg=new Image;
          newimg.src=dataSrc;
          newimg.onload=function(){
            img.src=dataSrc;
            img.removeAttribute("data-src");
            newimg=null;
            img.flag=true;//成功给src赋值
          }
       }

       document.onscroll=function(){
          let ch=html.clientHeight;
          let boxTh=box.getBoundingClientRect().bottom;
          if(ch>=boxTh){//加载图片
             if(img.flag){return}
             showimg();
          }
       }
    </script>
</body>
</html>